<template>
    <div style="width:100%; height:100vh;">
        <iframe id="viewFrame" v-if="type==='PDF'" style="width:100%; height:100vh;" :src="`/pdfjs/web/viewer.html?file=${baseUrl}/file/stream/${id}`">
        </iframe>
        <el-image-viewer v-if="type==='IMAGE'" :url-list="[`${baseUrl}/file/stream/${id}`]" />
        <video v-if="type==='VIDEO'" controls class="w100" style="height:100vh" autoplay="false" name="media" >
            <source :src="`${baseUrl}/file/stream/${id}`" />
        </video>
        <audio v-if="type==='AUDIO'" style="position:absolute; top:50%; left:0;right:0;margin-left:auto; margin-right:auto" :src="`${baseUrl}/file/stream/${id}`" controls></audio>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import { NextLoading } from '/@/utils/loading';

export default defineComponent({
    name:"fileView",
    props:{
        id: String,
        type: String, //PDF || IMAGE || VIDEO || AUDIO
        disableDownload: String,
    },
    setup(props) {
        const state = reactive({
            baseUrl: import.meta.env.VITE_API_URL,
            imageSrc: "",
        })

        onMounted(()=>{
            // if(props.type === 'IMAGE'){
            //     request.get(`/file/base64/${props.id}`).then(res => {
            //         state.imageSrc = "data:application/png;base64,"+res.data
            //     });
            // }
            NextLoading.done();
            if (props.type === 'PDF' && props.disableDownload === "1") {
                document.getElementById('viewFrame').onload = function(){
                    const iframeDocument = document.getElementsByTagName("iframe")[0].contentWindow?.document;
                    if (iframeDocument) {
                        const downloads = iframeDocument.body.getElementsByClassName("download");
                        downloads[0].style.display = 'none';
                        downloads[1].style.display = 'none';

                        const prints = iframeDocument.body.getElementsByClassName("print");
                        prints[0].style.display = 'none';
                        prints[1].style.display = 'none';
                    }
                };
            }
        })

        return {
            ...toRefs(state),
            ...toRefs(props),
        }
    },
})
</script>
<style scoped>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
:deep(.el-image-viewer__btn.el-image-viewer__close) {
    display: none;
}
</style>
